<template>
  <el-menu :default-active="$route.path"
           class="el-menu-demo"
           :router="true"
           mode="horizontal"
           :unique-opened="true"
           style="display: flex; justify-content: center; align-items: center;">

    <template v-for="item in menuData">
      <el-sub-menu v-if="item.children" :index="item.text">
        <template #title>
          <el-icon>
            <component :is="item.icon"></component>
          </el-icon>
          <span>{{ item.text }}</span>
        </template>
        <template v-for="child in item.children">
          <el-menu-item :index="child.path">
            <el-icon>
              <component :is="child.icon"></component>
            </el-icon>
            <span>{{ child.text }}</span>
          </el-menu-item>
        </template>
      </el-sub-menu>
      <el-menu-item v-else :key="item.text" :index="item.path">
        <el-icon>
          <component :is="item.icon"></component>
        </el-icon>
        <span>{{ item.text }}</span>
      </el-menu-item>
    </template>
  </el-menu>

  <router-view></router-view>
</template>

<script setup>
import {useRouter} from "vue-router";

const menuData=[
  {text:'课程信息管理',icon:'UserFilled',path:'/admin/course/info'},
  {text:'课表管理',icon:'User',path:'/admin/course/timetable'},
]
const router = useRouter();
const toLogin=()=>{
  router.push('/login')
}
</script>
<style scoped>
.el-menu-demo {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 如果你想垂直居中也可以加上这行 */
}

/* 确保子菜单项也居中显示 */
.el-menu--horizontal .el-menu-item,
.el-menu--horizontal .el-sub-menu__title {
  float: none; /* 解除默认浮动 */
  margin: 0 20px; /* 添加间距 */
}
</style>